<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* @keyframes myfirst {
            from {
                transform: translate(0, 0)
            }
            to {
                transform: translate(0, -3px)
            }
        } */
        
        ul {
            width: 1100px;
            display: flex;
            flex-shrink: 0;
            background-color: #F5F5F5;
        }
        
        a {
            color: black;
        }
        
        li {
            list-style: none;
            width: 236px;
            height: 300px;
            box-sizing: border-box;
            /* border: 1px solid red; */
            float: left;
            margin: 0 4px;
            padding: 2px 6px
        }
        
        h6 {
            width: 236px;
            margin: 0;
            text-align: center;
            font-weight: 500
        }
        
        p {
            width: 236px;
            font-size: 12px;
            color: grey;
            text-align: center;
            margin: 3px 0
        }
        
        span {
            color: red;
            font-size: 13px;
            margin: 2px 0 0 70px;
        }
        
        .money {
            color: grey;
            margin: 2px 0 0 0;
            text-decoration: line-through
        }
        
        li:hover {
            box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
            transform: translate(0px, -5px);
            transition-timing-function: linear;
            transition: all 0.4s;
        }
    </style>
</head>

<body>
    <ul>
        <a href="#">
            <li>

                <img src="../imgaes/1.jpg" alt="小米8青春版">
                <h6>小米8青春版6GB+64GB</h6>
                <p>潮流镜面渐变色，2400万自拍</p>
                <span>1499元</span>
                <span class="money">1699元</span>
            </li>
        </a>

        <a href="#">
            <li>
                <img src="../imgaes/2.jpg" alt="小米8SE">
                <h6>小米8 SE 6GB+64GB</h6>
                <p>三星AMOLED全面屏，晓龙710</p>
                <span>1599元</span>
                <span class="money">1999元</span>
            </li>
        </a>


        <a href="#">
            <li>
                <img src="../imgaes/3.jpg" alt="小米6X">
                <h6>小小米6X 6GB+128GB</h6>
                <p>轻薄美观的拍照手机</p>
                <span>1599元</span>
                <span class="money">1999元</span>
            </li>
        </a>


        <a href="#">
            <li>
                <img src="../imgaes/4.jpg" alt="红米6A">
                <h6>红米6A 2GB+16GB</h6>
                <p>12nm高性能处理器，1300万高清相机</p>
                <span>549元</span>
                <span class="money">599元</span>
            </li>
        </a>

    </ul>
</body>

</html>